<template>
  <div class="app-container region-picture-container">
    <!-- 页面标题 -->
    <div class="page-header">
      <div class="page-title">
        <div class="title-content">
          <div class="title-icon">
            <el-icon><PictureFilled /></el-icon>
          </div>
          <h1>区域图片管理</h1>
        </div>
      </div>
    </div>

    <!-- 顶部工具栏 -->
    <div class="toolbar-container">
      <div class="toolbar-left">
        <!-- 返回按钮（浏览模式且不在顶级时显示） -->
        <el-button
          v-if="!editMode && currentRegion"
          type="primary"
          icon="ArrowLeft"
          @click="handleBackToParent"
          class="back-btn"
        >
          返回上级
        </el-button>
        
        <!-- 编辑模式切换按钮 -->
        <el-button
          :type="editMode ? 'warning' : 'info'"
          :icon="editMode ? 'Edit' : 'View'"
          @click="toggleEditMode"
          class="mode-toggle-btn"
        >
          {{ editMode ? '编辑模式' : '浏览模式' }}
        </el-button>
        
        <!-- 面包屑导航 -->
        <div class="breadcrumb-container">
          <el-breadcrumb separator=">" class="region-breadcrumb">
            <el-breadcrumb-item 
              v-for="(item, index) in breadcrumbPath" 
              :key="item.id"
              :class="{ 'breadcrumb-clickable': index < breadcrumbPath.length - 1 }"
              @click="handleBreadcrumbClick(item, index)"
            >
              <svg-icon icon-class="location" class="breadcrumb-icon" />
              {{ item.name }}
            </el-breadcrumb-item>
          </el-breadcrumb>
        </div>
      </div>
      
      <div class="toolbar-right">
        <!-- 搜索框 -->
        <el-form :model="queryParams" ref="queryRef" :inline="true" class="search-form">
          <el-form-item>
            <el-input
              v-model="searchKeyword"
              placeholder="搜索区域名称"
              clearable
              prefix-icon="Search"
              @input="handleSearch"
              class="search-input"
            />
          </el-form-item>
        </el-form>
        
        <!-- 操作按钮 -->
        <div class="action-buttons">
          <el-button
            type="info"
            icon="Refresh"
            @click="refreshRegionData"
            class="action-btn"
          >刷新</el-button>
          <div v-if="editMode" style="display: flex; gap: 12px;">
            <el-button
              type="primary"
              icon="Plus"
              @click="handleAdd"
              v-hasPermi="['region:region_picture:add']"
              class="action-btn"
            >新增图片</el-button>
            <el-button
              type="warning"
              icon="Download"
              @click="handleExport"
              v-hasPermi="['region:region_picture:export']"
              class="action-btn"
            >导出</el-button>
          </div>
        </div>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="main-content" v-loading="loading">
      <!-- 瀑布流图片展示 -->
      <div class="waterfall-container">
        <!-- 瀑布流图片卡片 -->
        <div 
          v-for="region in filteredRegions" 
          :key="region.id"
          class="waterfall-item"
          @click="handleRegionClick(region)"
        >
          <div class="waterfall-card">
            <!-- 图片区域 -->
            <div class="waterfall-image">
              <el-image
                v-if="getRegionPicture(region.id)"
                :src="getImageUrl(getRegionPicture(region.id).picture)"
                fit="cover"
                :preview-src-list="[]"
                :preview-teleported="false"
                class="main-image"
              >
                <template #error>
                  <div class="image-placeholder">
                    <svg-icon icon-class="picture" />
                    <span>加载失败</span>
                  </div>
                </template>
              </el-image>
              <div v-else class="image-placeholder">
                <svg-icon icon-class="picture" />
                <span>暂无图片</span>
              </div>
              
              <!-- 编辑模式覆盖层 -->
              <div v-if="editMode" class="waterfall-overlay">
                <div class="overlay-actions">
                  <el-button
                    v-if="getRegionPicture(region.id)"
                    type="info"
                    icon="View"
                    circle
                    size="small"
                    @click.stop="handlePreviewPicture(region)"
                    class="overlay-btn"
                    title="预览图片"
                  />
                  <el-button
                    v-if="getRegionPicture(region.id)"
                    type="primary"
                    icon="Edit"
                    circle
                    size="small"
                    @click.stop="handleEditPicture(region)"
                    class="overlay-btn"
                    title="编辑图片"
                  />
                  <el-button
                    v-else
                    type="success"
                    icon="Plus"
                    circle
                    size="small"
                    @click.stop="handleAddPicture(region)"
                    class="overlay-btn"
                    title="添加图片"
                  />
                  <el-button
                    v-if="getRegionPicture(region.id)"
                    type="danger"
                    icon="Delete"
                    circle
                    size="small"
                    @click.stop="handleDeletePicture(region)"
                    class="overlay-btn"
                    title="删除图片"
                  />
                </div>
              </div>
            </div>
            
            <!-- 图片信息覆盖层 -->
            <div class="waterfall-info">
              <div class="info-content">
                <h3 class="region-title">{{ region.name }}</h3>
                <div class="region-meta">
                  <span v-if="hasChildren(region)" class="children-indicator">
                    <svg-icon icon-class="folder" />
                    {{ getChildrenCount(region) }}个子区域
                  </span>
                </div>
              </div>
              <div v-if="hasChildren(region)" class="expand-indicator">
                <svg-icon icon-class="arrow-right" />
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 空状态 -->
      <div v-if="filteredRegions.length === 0 && !loading" class="empty-state">
        <el-empty>
          <template #description>
            <span v-if="searchKeyword">未找到匹配的区域</span>
            <span v-else-if="currentRegion">该区域暂无子区域</span>
            <span v-else>暂无区域数据</span>
          </template>
        </el-empty>
      </div>
    </div>

    <!-- 详情对话框 -->
    <el-dialog 
      v-model="detailOpen" 
      :title="detailData.regionName || '区域图片详情'" 
      width="1200px"
      append-to-body
      class="detail-dialog"
      @close="handleDetailClose"
      :close-on-click-modal="false"
    >
      <div class="detail-container">
        <div class="detail-main">
          <div class="detail-image-wrapper">
            <image-preview 
              :src="detailData.picture" 
              :width="'100%'" 
              :height="'100%'"
              class="detail-image"
            />
          </div>
        </div>
        <div class="detail-sidebar">
          <div class="detail-info">
            <h3 class="detail-title">{{ detailData.regionName || '未知区域' }}</h3>
            <div class="detail-meta">
              <div class="meta-item">
                <span class="meta-label">区域编号：</span>
                <span class="meta-value">{{ detailData.regionId || '-' }}</span>
              </div>
              <div class="meta-item">
                <span class="meta-label">记录编号：</span>
                <span class="meta-value">{{ detailData.id || '-' }}</span>
              </div>
            </div>
          </div>
          <div class="detail-actions">
            <el-button 
              type="primary" 
              icon="Edit" 
              size="large"
              @click="handleUpdateFromDetail"
              v-hasPermi="['region:region_picture:edit']"
              class="action-button"
            >修改</el-button>
            <el-button 
              type="danger" 
              icon="Delete" 
              size="large"
              @click="handleDeleteFromDetail"
              v-hasPermi="['region:region_picture:remove']"
              class="action-button"
            >删除</el-button>
          </div>
        </div>
      </div>
    </el-dialog>

    <!-- 添加或修改员工区域管理对话框 -->
    <el-dialog :title="title" v-model="open" width="500px" append-to-body>
      <el-form ref="region_pictureRef" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="区域编号" prop="regionId">
          <el-tree-select
            v-model="form.regionId"
            :data="regionOptions"
            :props="{ value: 'id', label: 'name', children: 'children' }"
            value-key="id"
            placeholder="请选择区域"
            check-strictly
          />
        </el-form-item>
        <el-form-item label="图片" prop="picture">
          <image-upload v-model="form.picture" :limit="1"/>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="Region_picture">
import { listRegion_picture, getRegion_picture, delRegion_picture, addRegion_picture, updateRegion_picture } from "@/api/region/region_picture"
import { listRegion } from "@/api/region/region"
import { PictureFilled } from '@element-plus/icons-vue'
import { isExternal } from "@/utils/validate"

const { proxy } = getCurrentInstance()

const region_pictureList = ref([])
const regionOptions = ref([])
const regionList = ref([])
const allRegions = ref([]) // 扁平化的所有区域
const currentRegion = ref(null) // 当前显示的区域
const breadcrumbPath = ref([]) // 面包屑路径
const editMode = ref(false) // 编辑模式
const searchKeyword = ref('') // 搜索关键词
const filteredRegions = ref([]) // 过滤后的区域列表
const open = ref(false)
const detailOpen = ref(false)
const detailData = ref({})
const loading = ref(true)
const showSearch = ref(true)
const ids = ref([])
const single = ref(true)
const multiple = ref(true)
const total = ref(0)
const title = ref("")

const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    regionId: null,
  },
  rules: {
    regionId: [
      { required: true, message: "区域编号不能为空", trigger: "change" }
    ],
    picture: [
      { 
        required: true, 
        message: "图片不能为空", 
        trigger: "change",
        validator: (rule, value, callback) => {
          if (!value || value.trim() === '') {
            callback(new Error('图片不能为空'))
          } else {
            callback()
          }
        }
      }
    ],
  }
})

const { queryParams, form, rules } = toRefs(data)

/** 查询区域图片管理列表 */
function getList(keepCurrentView = false) {
  loading.value = true
  Promise.all([
    listRegion_picture({ pageNum: 1, pageSize: 10000 }), // 获取所有图片数据
    listRegion() // 获取所有区域数据
  ]).then(([pictureResponse, regionResponse]) => {
    region_pictureList.value = pictureResponse.rows || []
    total.value = pictureResponse.total || 0
    
    // 处理区域数据
    const regions = regionResponse.data || []
    regionList.value = proxy.handleTree(regions, "id", "parentId")
    allRegions.value = flattenRegionList(regionList.value)
    
    // 根据参数决定是否保持当前视图
    if (keepCurrentView) {
      // 保持当前视图，只更新过滤后的区域列表
      updateFilteredRegions()
    } else {
      // 初始化显示省级区域
      initializeView()
    }
    
    loading.value = false
  }).catch(error => {
    console.error('获取数据失败:', error)
    loading.value = false
  })
}

/** 刷新区域数据 */
function refreshRegionData() {
  console.log('刷新区域数据...')
  getList(true) // 保持当前视图
}

/** 初始化视图 */
function initializeView() {
  // 显示省级区域（顶级区域）
  currentRegion.value = null
  breadcrumbPath.value = [{ id: null, name: '全国' }]
  updateFilteredRegions()
}

/** 更新过滤后的区域列表 */
function updateFilteredRegions() {
  let regions = []
  
  if (currentRegion.value === null) {
    // 显示省级区域
    regions = regionList.value
  } else {
    // 显示当前区域的子区域
    const current = findRegionById(currentRegion.value.id)
    regions = current?.children || []
  }
  
  // 应用搜索过滤
  if (searchKeyword.value) {
    regions = regions.filter(region => 
      region.name.toLowerCase().includes(searchKeyword.value.toLowerCase())
    )
  }
  
  filteredRegions.value = regions
}

/** 扁平化区域列表 */
function flattenRegionList(nodes) {
  let result = []
  nodes.forEach(node => {
    result.push(node)
    if (node.children && node.children.length > 0) {
      result = result.concat(flattenRegionList(node.children))
    }
  })
  return result
}

/** 获取图片URL */
function getImageUrl(src) {
  if (!src) return ''
  let real_src = src.split(",")[0]
  if (isExternal(real_src)) {
    return real_src
  }
  return import.meta.env.VITE_APP_BASE_API + real_src
}

/** 获取区域名称 */
function getRegionName(id) {
  if (!id) return '未知区域'
  const region = allRegions.value.find(region => region.id == id)
  return region?.name || `区域${id}`
}

/** 根据ID查找区域 */
function findRegionById(id) {
  return allRegions.value.find(region => region.id === id)
}

/** 获取区域图片 */
function getRegionPicture(regionId) {
  return region_pictureList.value.find(item => item.regionId === regionId)
}

/** 检查区域是否有子区域 */
function hasChildren(region) {
  return region.children && region.children.length > 0
}

/** 获取子区域数量 */
function getChildrenCount(region) {
  return region.children ? region.children.length : 0
}

/** 获取区域类型 */
function getRegionType(region) {
  if (region.name.endsWith('省') || region.name.endsWith('自治区') || region.name.endsWith('特别行政区')) {
    return '省级'
  } else if (region.name.endsWith('市')) {
    return '市级'
  } else if (region.name.endsWith('区') || region.name.endsWith('县')) {
    return '区县级'
  } else {
    return '其他'
  }
}

/** 显示图片详情 */
function showPictureDetail(picture, region) {
  detailData.value = {
    ...picture,
    regionName: region.name
  }
  detailOpen.value = true
}

/** 编辑区域图片 */
function handleEditRegionPicture(region) {
  const picture = getRegionPicture(region.id)
  if (picture) {
    handleUpdate(picture)
  } else {
    handleAddPicture(region)
  }
}

/** 预览图片 */
function handlePreviewPicture(region) {
  const picture = getRegionPicture(region.id)
  if (picture) {
    showPictureDetail(picture, region)
  }
}

/** 编辑图片 */
function handleEditPicture(region) {
  const picture = getRegionPicture(region.id)
  if (picture) {
    handleUpdate(picture)
  }
}

/** 添加图片 */
function handleAddPicture(region) {
  reset()
  getTreeselect()
  form.value.regionId = region.id
  open.value = true
  title.value = `为 ${region.name} 添加图片`
}

/** 删除图片 */
function handleDeletePicture(region) {
  const picture = getRegionPicture(region.id)
  if (picture) {
    proxy.$modal.confirm(`是否确认删除 ${region.name} 的图片？`).then(() => {
      return delRegion_picture(picture.id)
    }).then(() => {
      proxy.$modal.msgSuccess("删除成功")
      getList(true) // 保持当前视图
    }).catch(() => {})
  }
}

/** 区域卡片点击事件 */
function handleRegionClick(region) {
  if (editMode.value) {
    // 编辑模式：进入编辑页面
    handleEditRegionPicture(region)
  } else {
    // 浏览模式：只有有子区域的才能点击进入
    if (hasChildren(region)) {
      navigateToRegion(region)
    }
    // 最里层没有子区域的不做任何操作
  }
}

/** 导航到指定区域 */
function navigateToRegion(region) {
  currentRegion.value = region
  
  // 更新面包屑路径
  const path = buildBreadcrumbPath(region)
  breadcrumbPath.value = path
  
  // 更新显示的区域列表
  updateFilteredRegions()
}

/** 返回上级区域 */
function handleBackToParent() {
  if (currentRegion.value) {
    if (currentRegion.value.parentId) {
      const parentRegion = findRegionById(currentRegion.value.parentId)
      if (parentRegion) {
        navigateToRegion(parentRegion)
      } else {
        // 返回顶级
        initializeView()
      }
    } else {
      // 当前是省级，返回全国视图
      initializeView()
    }
  }
}

/** 面包屑点击事件 */
function handleBreadcrumbClick(item, index) {
  if (index < breadcrumbPath.value.length - 1) {
    if (item.id === null) {
      initializeView()
    } else {
      const region = findRegionById(item.id)
      if (region) {
        navigateToRegion(region)
      }
    }
  }
}

/** 构建面包屑路径 */
function buildBreadcrumbPath(region) {
  const path = [{ id: null, name: '全国' }]
  
  // 递归构建路径
  function buildPath(reg) {
    if (reg.parentId) {
      const parent = findRegionById(reg.parentId)
      if (parent) {
        buildPath(parent)
      }
    }
    path.push({ id: reg.id, name: reg.name })
  }
  
  if (region) {
    buildPath(region)
  }
  
  return path
}

/** 切换编辑模式 */
function toggleEditMode() {
  editMode.value = !editMode.value
}

/** 搜索处理 */
function handleSearch() {
  updateFilteredRegions()
}

/** 详情对话框关闭 */
function handleDetailClose() {
  detailData.value = {}
}

/** 从详情页修改 */
function handleUpdateFromDetail() {
  detailOpen.value = false
  handleUpdate(detailData.value)
}

/** 从详情页删除 */
function handleDeleteFromDetail() {
  const _ids = detailData.value.id
  proxy.$modal.confirm('是否确认删除员工区域管理编号为"' + _ids + '"的数据项？').then(function() {
    return delRegion_picture(_ids)
  }).then(() => {
    detailOpen.value = false
    getList(true) // 保持当前视图
    proxy.$modal.msgSuccess("删除成功")
  }).catch(() => {})
}

// 取消按钮
function cancel() {
  open.value = false
  reset()
}

// 表单重置
function reset() {
  form.value = {
    id: null,
    regionId: null,
    picture: null
  }
  proxy.resetForm("region_pictureRef")
}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1
  getList()
}

/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryRef")
  handleQuery()
}

// 多选框选中数据（保留用于批量操作）
function handleSelectionChange(selection) {
  ids.value = selection.map(item => item.id)
  single.value = selection.length != 1
  multiple.value = !selection.length
}

/** 查询区域信息管理下拉树结构 */
function getTreeselect() {
  listRegion().then(response => {
    regionOptions.value = []
    regionOptions.value = proxy.handleTree(response.data, "id", "parentId")
  })
}

/** 新增按钮操作 */
function handleAdd() {
  reset()
  getTreeselect()
  open.value = true
  title.value = "添加区域图片"
}

/** 修改按钮操作 */
function handleUpdate(row) {
  reset()
  getTreeselect()
  const _id = row.id || ids.value
  getRegion_picture(_id).then(response => {
    form.value = response.data
    open.value = true
    title.value = "修改员工区域管理"
  })
}

/** 提交按钮 */
function submitForm() {
  proxy.$refs["region_pictureRef"].validate(valid => {
    if (valid) {
      if (form.value.id != null) {
        updateRegion_picture(form.value).then(response => {
          proxy.$modal.msgSuccess("修改成功")
          open.value = false
          getList(true) // 保持当前视图
        })
      } else {
        addRegion_picture(form.value).then(response => {
          proxy.$modal.msgSuccess("新增成功")
          open.value = false
          getList(true) // 保持当前视图
        })
      }
    }
  })
}

/** 删除按钮操作 */
function handleDelete(row) {
  const _ids = row.id || ids.value
  proxy.$modal.confirm('是否确认删除员工区域管理编号为"' + _ids + '"的数据项？').then(function() {
    return delRegion_picture(_ids)
  }).then(() => {
    getList(true) // 保持当前视图
    proxy.$modal.msgSuccess("删除成功")
  }).catch(() => {})
}

/** 导出按钮操作 */
function handleExport() {
  proxy.download('region/region_picture/export', {
    ...queryParams.value
  }, `region_picture_${new Date().getTime()}.xlsx`)
}

// 页面加载时获取数据
getList()

// 监听页面可见性变化，当页面重新获得焦点时刷新数据
onMounted(() => {
  // 监听页面可见性变化
  const handleVisibilityChange = () => {
    if (!document.hidden) {
      // 页面重新可见时，延迟一点刷新数据
      setTimeout(() => {
        refreshRegionData()
      }, 500)
    }
  }
  
  // 监听窗口焦点变化
  const handleFocus = () => {
    setTimeout(() => {
      refreshRegionData()
    }, 500)
  }
  
  document.addEventListener('visibilitychange', handleVisibilityChange)
  window.addEventListener('focus', handleFocus)
  
  // 组件卸载时移除监听器
  onUnmounted(() => {
    document.removeEventListener('visibilitychange', handleVisibilityChange)
    window.removeEventListener('focus', handleFocus)
  })
})
</script>

<style lang="scss" scoped>
// 主容器样式 - 符合系统玻璃拟态风格
.region-picture-container {
  padding: 24px;
  min-height: 100vh;
  
  .app-container {
    background: transparent;
    padding: 0;
  }
}

// 页面标题样式 - 使用系统标准玻璃效果
.page-header {
  margin-bottom: 24px;
  
  .page-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37);
    
    .title-content {
      display: flex;
      align-items: center;
      gap: 12px;
      
      .title-icon {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
        display: flex;
        align-items: center;
        justify-content: center;
        
        svg {
          font-size: 20px;
          color: white;
        }
      }
      
      h1 {
        font-size: 24px;
        font-weight: 700;
        color: var(--text-primary);
        margin: 0;
      }
    }
  }
}

// 工具栏样式 - 使用系统标准玻璃效果
.toolbar-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37);
  margin-bottom: 24px;
}

.toolbar-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

// 按钮样式 - 使用系统标准样式
.back-btn, .mode-toggle-btn, .action-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 8px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  
  &.el-button--primary, &.back-btn {
    background: linear-gradient(135deg, var(--accent-blue), var(--accent-orange));
    color: white;
    border: none;
    
    &:hover {
      box-shadow: 0 8px 25px rgba(66, 165, 245, 0.4);
      transform: translateY(-2px);
    }
  }
  
  &.el-button--warning, &.mode-toggle-btn.el-button--warning {
    background: rgba(255, 255, 255, 0.15);
    color: #ffb74d;
    border: 1px solid rgba(255, 183, 77, 0.3);
    backdrop-filter: blur(10px);
    
    &:hover {
      background: rgba(255, 183, 77, 0.1);
      border-color: rgba(255, 183, 77, 0.5);
      box-shadow: 0 4px 15px rgba(255, 183, 77, 0.2);
    }
  }
  
  &.el-button--info, &.mode-toggle-btn.el-button--info {
    background: linear-gradient(135deg, var(--accent-blue), var(--accent-orange));
    color: white;
    border: none;
    
    &:hover {
      box-shadow: 0 8px 25px rgba(66, 165, 245, 0.4);
      transform: translateY(-2px);
    }
  }
}

.toolbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

// 面包屑导航
.breadcrumb-container {
  .region-breadcrumb {
    :deep(.el-breadcrumb__item) {
      .el-breadcrumb__inner {
        display: flex;
        align-items: center;
        gap: 6px;
        color: #606266;
        font-weight: 500;
        transition: all 0.3s ease;
        
        &:hover {
          color: #409eff;
        }
      }
      
      &.breadcrumb-clickable .el-breadcrumb__inner {
        cursor: pointer;
        
        &:hover {
          color: #409eff;
        }
      }
      
      &:last-child .el-breadcrumb__inner {
        color: #303133;
        font-weight: 600;
      }
    }
  }
}

.breadcrumb-icon {
  font-size: 14px;
}

// 搜索框 - 使用系统标准样式
.search-form {
  margin: 0;
  
  .el-form-item {
    margin: 0;
  }
}

.search-input {
  width: 280px;
  
  :deep(.el-input__wrapper) {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    backdrop-filter: blur(10px);
    box-shadow: none;
    
    &:hover {
      border-color: rgba(255, 255, 255, 0.3);
    }
    
    &.is-focus {
      border-color: var(--accent-blue);
      box-shadow: 0 0 0 2px rgba(66, 165, 245, 0.2);
    }
    
    .el-input__inner {
      background: transparent;
      color: var(--text-primary);
      
      &::placeholder {
        color: var(--text-muted);
      }
    }
  }
}

// 操作按钮
.action-buttons {
  display: flex;
  gap: 12px;
}

// 主要内容区域 - 使用系统标准玻璃效果
.main-content {
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37);
  padding: 24px;
  min-height: 600px;
}

// 瀑布流容器
.waterfall-container {
  columns: 4;
  column-gap: 24px;
  padding: 0;
  
  @media (max-width: 1400px) {
    columns: 3;
  }
  
  @media (max-width: 1024px) {
    columns: 2;
  }
  
  @media (max-width: 768px) {
    columns: 1;
  }
}

// 瀑布流项目
.waterfall-item {
  break-inside: avoid;
  margin-bottom: 24px;
  cursor: pointer;
}

// 瀑布流卡片
.waterfall-card {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37);
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  
  &:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(31, 38, 135, 0.5);
    border-color: rgba(255, 255, 255, 0.3);
    
    .waterfall-info {
      background: rgba(0, 0, 0, 0.8);
    }
  }
}

// 瀑布流图片区域
.waterfall-image {
  position: relative;
  width: 100%;
  
  .main-image {
    width: 100%;
    height: auto;
    display: block;
    
    :deep(.el-image__inner) {
      width: 100%;
      height: auto;
      transition: transform 0.3s ease;
    }
  }
  
  &:hover {
    :deep(.el-image__inner) {
      transform: scale(1.05);
    }
  }
}

// 瀑布流信息覆盖层
.waterfall-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
  color: white;
  padding: 20px 16px 16px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  transition: all 0.3s ease;
}

.info-content {
  flex: 1;
  min-width: 0;
}

.region-title {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 8px 0;
  color: white;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.region-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  opacity: 0.9;
}

.children-indicator {
  display: flex;
  align-items: center;
  gap: 4px;
  
  .svg-icon {
    font-size: 12px;
  }
}

.expand-indicator {
  margin-left: 12px;
  opacity: 0.8;
  
  .svg-icon {
    font-size: 16px;
    color: white;
  }
}

// 瀑布流覆盖层（编辑模式）
.waterfall-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.waterfall-card:hover .waterfall-overlay {
  opacity: 1;
  visibility: visible;
}

// 图片区域
.card-image-wrapper {
  position: relative;
  width: 100%;
  height: 200px;
  background: #f5f7fa;
  overflow: hidden;
}

.card-image {
  width: 100%;
  height: 100%;
  
  :deep(.el-image) {
    width: 100%;
    height: 100%;
    border-radius: 0;
    
    .el-image__inner {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
}

.image-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  
  .svg-icon {
    font-size: 48px;
    margin-bottom: 12px;
    opacity: 0.6;
    color: var(--text-muted);
  }
  
  span {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-muted);
  }
}

// 卡片覆盖层（编辑模式）
.card-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.overlay-actions {
  display: flex;
  gap: 12px;
}

.overlay-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  backdrop-filter: blur(10px);
  
  &.el-button--primary {
    background: rgba(64, 158, 255, 0.9);
  }
  
  &.el-button--success {
    background: rgba(103, 194, 58, 0.9);
  }
  
  &.el-button--danger {
    background: rgba(245, 108, 108, 0.9);
  }
  
  &:hover {
    transform: scale(1.1);
  }
}

// 卡片信息区域
.card-info {
  padding: 20px;
}

.card-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 12px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-status {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 12px;
}

.expand-icon {
  color: var(--text-muted);
  font-size: 16px;
  transition: all 0.3s ease;
}

.region-card:hover .expand-icon {
  color: var(--accent-blue);
  transform: translateX(4px);
}

// 空状态
.empty-state {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 400px;
  grid-column: 1 / -1;
  
  :deep(.el-empty) {
    .el-empty__image {
      width: 120px;
    }
    
    .el-empty__description {
      color: #909399;
      font-size: 16px;
    }
  }
}

.detail-dialog {
  :deep(.el-dialog) {
    border-radius: 8px;
    overflow: hidden;
  }
  
  :deep(.el-dialog__header) {
    padding: 20px 30px;
    background: #f5f7fa;
    border-bottom: 1px solid #e4e7ed;
  }
  
  :deep(.el-dialog__title) {
    font-size: 20px;
    font-weight: 600;
    color: #303133;
  }
  
  :deep(.el-dialog__body) {
    padding: 0;
    overflow: hidden;
  }
  
  :deep(.el-dialog__headerbtn) {
    top: 20px;
    right: 30px;
  }
}

.detail-container {
  display: flex;
  min-height: 700px;
  max-height: 80vh;
}

.detail-main {
  flex: 1;
  background: #1a1a1a;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 50px;
  min-width: 0; /* 防止flex子元素溢出 */
}

.detail-image-wrapper {
  width: 100%;
  max-width: 900px;
  aspect-ratio: 16 / 9;
  position: relative;
  background: #000;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.detail-image {
  width: 100%;
  height: 100%;
  
  :deep(.el-image) {
    width: 100%;
    height: 100%;
    border-radius: 0;
    box-shadow: none;
    
    .el-image__inner {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
  }
}

.detail-sidebar {
  width: 380px;
  min-width: 380px;
  background: #fff;
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-left: 1px solid #e4e7ed;
  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.05);
}

.detail-info {
  flex: 1;
}

.detail-title {
  font-size: 28px;
  font-weight: 600;
  color: #303133;
  margin: 0 0 35px 0;
  padding-bottom: 25px;
  border-bottom: 2px solid #f0f0f0;
  line-height: 1.4;
}

.detail-meta {
  .meta-item {
    margin-bottom: 24px;
    display: flex;
    align-items: flex-start;
    font-size: 15px;
  }
  
  .meta-label {
    font-weight: 500;
    color: #606266;
    min-width: 110px;
    flex-shrink: 0;
  }
  
  .meta-value {
    color: #303133;
    flex: 1;
    word-break: break-all;
  }
}

.detail-actions {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-top: 30px;
  border-top: 2px solid #f0f0f0;
  margin-top: auto;
}

.action-button {
  width: 100%;
  height: 50px;
  font-size: 16px;
  font-weight: 500;
  border-radius: 6px;
}

.card-title {
  padding: 16px;
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  color: #303133;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.empty-state {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 400px;
}

@media (max-width: 768px) {
  .picture-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 15px;
  }
  
  .detail-container {
    flex-direction: column;
    min-height: auto;
  }
  
  .detail-main {
    padding: 20px;
    min-height: 300px;
  }
  
  .detail-sidebar {
    width: 100%;
    padding: 20px;
  }
  
  .detail-image-wrapper {
    max-width: 100%;
  }
}
</style>
